<template>
  <div>
    <div calss="section">
      <van-nav-bar :title="title" :fixed="true" left-arrow @click-left="onClickLeft" />

      <!-- <div id="inner">
      	<van-card :price="detail.pprice" :desc="detail.pdesc" :title="detail.pname" :thumb="detail.pimg" />
      </div> -->

      <van-swipe :autoplay="3000" indicator-color="white" :loop="true">
        <van-swipe-item>
          <img :src="detail.coverImg" />
        </van-swipe-item>
        <van-swipe-item>
          <img :src="detail.coverImg" />
        </van-swipe-item>
        <van-swipe-item>
          <img :src="detail.coverImg" />
        </van-swipe-item>
      </van-swipe>

      <!-- <van-panel class="sp" :title="detail.price" :desc="detail.descriptions" status="降价通知">
				<span> ￥ {{detail.price}}</span>
				<img src="../assets/huiyuan.jpg" />
			</van-panel> -->

      <div class="miaoshu">
        <span class="price">￥{{detail.price}}</span>
        <span class="desc">{{detail.name}}</span>
        <span class="tongzhi">降价通知</span>
        <img src="../assets/huiyuan.jpg" />
      </div>

      <div class="sku-container">
        <van-action-sheet v-model="showBase" >
        	<div class="commodity">
        		<img :src="detail.coverImg" alt="">
        		<div>
        			<h2>￥{{detail.price}}</h2>
              <p>库存：27381件</p>
        			<!-- <span>选择 尺寸 颜色</span> -->
        		</div>
        		<van-icon name="close" size='20px' v-tap="{methods:close}" class="close"/>
        	</div>
        	<div class="select">
        		<div class="num">
        			<p>购买数量1件</p>
        		</div>
        		<van-divider />
        		<van-button type="primary" @click="addCart" v-model='showBase' class="ok" size="large" >确定</van-button>
        	</div>
        </van-action-sheet>
        <van-panel title="已选" desc="1件" status="···" class="wrap" @click="showBase = true">
        </van-panel>
        <div>
          <van-panel title="运费" desc="包邮" status="···">
            <van-popup v-model="show" closeable position="bottom" calss="baoyou">
              <van-cell value="运费说明" class="biaoti2" />
              <van-cell value="订单满60元包邮(社区团购商品除外)，不足金额的订
                  单收取8元运费(新疆，西藏等偏远地区除外)，含多
                  个商品的订单,以订单的总金额为准(不含税费)，使
                  用虚拟资户(优惠券，糖豆等)不影响包邮的计算。"
                left />

            </van-popup>
            <div @click="show=true">

              <img src="../assets/baoyou.gif" alt="">
            </div>
          </van-panel>
        </div>


        <van-panel title="评价" desc="好评率100.00%" status=">">
          <div>
            <div class="xinxi">
              <h3><img src="../assets/touxiang.gif" alt=""><span>c***n</span><img src="../assets/xhuiyuan.gif" alt=""></h3>
              <p>2019-10-26 14:50:01</p>
            </div>
            <div class="int">
              <van-rate v-model="visiable" :size="25" color="#f7aeb2" void-icon="star" void-color="#eee" readonly />
              <p>非常不错，五星好评</p>
            </div>
            <div slot="footer">
              <van-button size="small">查看全部评价</van-button>
            </div>
          </div>
        </van-panel>
      </div>

    </div>
    <div style="height: 50px;width: 100%;"></div>
    <van-goods-action>
      <van-goods-action-icon icon="service-o" text="客服" @click="kefu" />
      <van-goods-action-icon icon="shopping-cart-o" text="购物车" @click="cart" />
      <van-goods-action-button type="warning" text="加入购物车" :price="getTitol*100" @click="addCart()" />
      <van-goods-action-button type="danger" text="立即购买" @click="buyClicked" />
    </van-goods-action>

  </div>

</template>

<script>
  import * as api from '../api/getProlist'
  // import skuData from '../data/data'
  export default {
    name: 'Detail',
    data() {
      return {
		objArr: [], //选中的商品
        active: 0,
        title: "详情",
        detail: [],
        value: 5,
        show: false,
        visiable: 5,
        call: '',
        showBase: false,
      };
    },
    mounted() {
		window.scrollTo(0,0)
      console.log(this.$route.params.id)

      api.getProDetail(this.$route.params.id).then((data) => {
        console.log(data)
        this.detail = data.data
      })

    },
    methods: {
      onClickLeft() {
        // this.$toast('返回');
        this.$router.go(-1)
      },
	  kefu(){
		  this.$toast('小姐姐很忙，请稍后~');
	  },
      cart() {
        // this.$toast('点击图标');
		if(!localStorage.getItem('token')){
			this.$router.push('/login')
		}else{
			this.$router.push('/cart')
		}
      },
      onChange(index) {
        this.showList = false;
        this.chosenCoupon = index;
      },
      onExchange(code) {
        this.coupons.push(coupon);
      },
      buyClicked() {
		// this.$toast('点击按钮');
		if(!localStorage.getItem('token')){
			this.$router.push('/login')
		}else{
			this.$store.commit("getOder", this.objArr);
			this.$toast.loading({
			  message: "加载中...",
			  forbidClick: true,
			  duration: 500
			});
			setTimeout(() => {
			  localStorage.setItem("oder", JSON.stringify(this.objArr));
			  this.$router.push({path:"/settlement",query:{id:this.$route.params.id}});
			}, 600);
		}
      },
      addCart() {
		if(!localStorage.getItem('token')){
			this.$router.push('/login')
		}else{
			api.getAddcart({
				product: this.$route.params.id,
				quantity: 1,
			}).then((data) => {
				console.log(data)
				this.$toast('加入购物车成功')
        this.showBase=false
			})
		}
      },
      onBuyClicked(data) {
        this.$toast('buy:' + JSON.stringify(data));
        console.log(JSON.stringify(data))
      },
      close(){
      	this.showBase=false
      },
      onAddCartClicked(data) {
        this.$toast('add cart:' + JSON.stringify(data));
      },
    },
	computed: {
	  getTitol() {
	    //总价
	    let sum = 0;
	    sum = this.detail.price * 1
		return sum;
	  }
	},
  }
</script>

<style scoped="">
  /* #inner {
		margin: 46px 0 50px;
	} */

  body {
    display: flex;
    flex-direction: column;
  }

  .van-cell__label {
    margin-top: 0;
  }

  .van-nav-bar {
    height: 46px;
  }

  .section {
    flex: 1;
  }

  .biaoti2 .van-cell__value--alone {
    text-align: center;
  }

  .van-goods-action {
    height: 50px;
  }

  .van-goods-action-button--first {
    border-radius: initial;
    background: #fcabb4;
  }

  .van-goods-action-button--danger {
    border-radius: initial;
    background: #d4616e;
    margin: 0;
  }

  .van-goods-action-button {
    height: 50px;
  }

  .van-nav-bar__title {
    color: #fff;
    font-size: 14px;
  }

  .van-panel__header-value{
    font-size: 11px;
  }

  .van-cell__title span{
    font-size: 11px;
  }

  .van-cell__label{
    font-size: 11px;
  }

  .van-nav-bar {
    height: 46px;
    background: #d46170;
  }

  .van-icon,
  .van-icon::before {
    color: #FFF;
    font-size: 12px;
  }

  .van-swipe-item img {
    width: 300px;
    height: 300px;
    margin: 56px auto 0;
    display: block;
  }

  .van-cell__title span {
    font-size: 15px;
    color: #b8465b;
  }

  .van-cell__label {
    font-size: 13px;
    color: #141819;
  }

  .van-panel {
    padding-bottom: 14px;
    border-bottom: 9px solid #edf4f4;
    text-align: center;
  }

  .van-panel img {
    width: 294px;
    height: 40px;
    display: block;
    margin: 0 auto;
  }

  .van-cell__title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .van-cell__title span{
    color: #9e9e9f;
  }

  .van-cell__label{
    margin-left: 9px;
    color: #2d2d2d;
  }

  .van-panel__header-value {
    color: #9e9e9f;
  }

  .baoyou {
    height: 154px;
    font-size: 12px;
  }

  .wrap {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .van-button--small {
    text-align: center;
    border-radius: 11px;
    width: 96px;
    height: 22px;
    font-size: 10px;
    line-height: 22px;
  }

  .xinxi {
    display: flex;
    height: 40px;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
  }

  .xinxi h3 {
    display: flex;
    height: 40px;
    align-items: center;
    justify-content: flex-start;
    font-size: 9px;
  }

  .xinxi h3 img:first-of-type {
    width: 25px;
    height: 25px;
    display: block;
  }

  .xinxi h3 span {
    margin: 0 9px 0 4px;
  }

  .xinxi h3 img:last-of-type {
    width: 63px;
    height: 14px;
    display: block;
  }

  .xinxi p {
    font-size: 10px;
  }

  .int {
    padding-left: 17px;
  }

  .int p,
  .van-rate {
    font-size: 10px;
    display: flex;
    justify-content: flex-start;
  }

  .miaoshu {
    height: 85px;
    margin-top: 10px;
  }

  .miaoshu .price {
    font-size: 16px;
    color: #d88694;
    padding-left: 5px;
  }

  .miaoshu .desc {
    font-size: 13px;
    padding-left: 5px;
    width: 180px;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .miaoshu .tongzhi {
    font-size: 15px;
    color: #ed1620;
    position: absolute;
    right: 10px;
  }

  .miaoshu img {
    margin: 10px auto;
    width: 294px;
    height: 40px;
    display: block;
  }
  .commodity{
  		display: flex;

  	}
  	.commodity h2{
  		color: #FF0036;
      font-size: 15px;
  	}
  	.commodity p,.num p{
  		color: #051b28;
      font-size: 15px;
  	}
    .van-icon-close:before{
      color: #000000;
      font-size: 20px;
      position: relative;
  		top: 10px;
  		right: -20px;
    }
    .commodity img{
    	width: 150px;
    	height:150px;
    	margin-right: 10px;
      border-radius: 30%;
    }
.van-button--primary{
      background: #D4616E;
      border: 0;
    }
</style>
